<template>
	<view>
		<!-- <u-empty text="地图初始化中..." mode="address"></u-empty> -->
		<view class="header">
			<view><text>定位地址</text></view>
		</view>
		<view class="search">
			<view class="point u-p-r-20"><u-icon name="map-fill"></u-icon><text class="u-font-28">{{point}}</text></view>
			<view class="u-flex-1">
				<u-input v-model="key" @input="$u.debounce(inputKey, 500)" :border="true" placeholder="请输入关键词(街道,小区等)" />
			</view>
		</view>
		<map
			id="addressMap" 
			ref="addressMap" 
			style="width: 750rpx; height: 20vh;" 
			:scale="16" 
			:latitude="latitude"
			:longitude="longitude" 
			:markers="covers"
			@updated="updatedMap"
			@anchorpointtap="anchorpointtap"
		>
		</map>
		
		<view>
			<u-cell-group>
				<u-cell-item 
					v-for="(item,index) in addressList" 
					:title="item.name" 
					:use-label-slot="true"
					@click="getAddress(item)"
					>
					<view slot="label">
						<text v-if="item.address.length == 0">--</text>
						<text v-else>{{item.address}}</text>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: '',
				addressList: [],
				latitude: 23.681763,
				longitude: 113.056031,
				covers: [],
				point: '未定位'
			}
		},
		// watch:{
		// 	key(val){
		// 		uni.request({
		// 			url:'https://restapi.amap.com/v3/assistant/inputtips',
		// 			data: {
		// 			    key: 'd1a7ea2dc24fa8ae4b0b10eac185ad5d',
		// 				city: this.point,
		// 				keywords: this.key
		// 			},
		// 			success: (res) => {
		// 				console.log(res)
						
		// 				try{
		// 					this.addressList = res.data.tips
		// 					if(this.addressList[0].location){
		// 						let location = this.addressList[0].location.split(',')
		// 						this.longitude = location[0]
		// 						this.latitude = location[1]
		// 					}
		// 				}catch(e){
		// 					console.log(e)
		// 				}
						
		// 			},
		// 			fail: () => {
						
		// 			}
		// 		})
		// 	}
		// },
		created() {
			//初始化ip定位
			uni.request({
				url:'https://restapi.amap.com/v3/ip',
				data: {
				    key: 'd1a7ea2dc24fa8ae4b0b10eac185ad5d',
				},
				success: (res) => {
					console.log(res)
					this.point = res.data.city
					
				},
				fail: () => {
					
				}
			})
			// let that = this
			// wx.getLocation({
			// 	type: 'gcj02',
			// 	isHighAccuracy: true,
			// 	success: function(res) {
			// 		console.log(res)
			// 	}
			// });
		},
		methods: {
			inputKey(){
				uni.request({
					url:'https://restapi.amap.com/v3/assistant/inputtips',
					data: {
					    key: 'd1a7ea2dc24fa8ae4b0b10eac185ad5d',
						city: this.point,
						keywords: this.key
					},
					success: (res) => {
						console.log(res)
						
						try{
							this.addressList = res.data.tips
							if(this.addressList[0].location){
								let location = this.addressList[0].location.split(',')
								this.longitude = location[0]
								this.latitude = location[1]
							}
						}catch(e){
							console.log(e)
						}
						
					},
					fail: () => {
						
					}
				})
			},
			updatedMap(){ //地图组件初始化完成时
				console.log('地图初始化完成')
			},
			getAddress(item){
				console.log(item)
				let location = item.location.split(',')
				this.longitude = location[0]
				this.latitude = location[1]
				this.covers = []
				// this.covers.push({
				// 	id:item.id,
				// 	latitude: this.latitude,
				// 	longitude: this.longitude,
				// 	iconPath: '/static/images/location.png',
				// 	title: item.name
				// })
				
				this.$emit('getAddress',item)
			},
			anchorpointtap(e){
				console.log(e.detail)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.search{
		display: flex;
		align-items: center;
		padding: 20upx;
	}
</style>
